<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.1.1.min.js"> </script>
    <script src="/js/vue.min.js"></script>
</head>
<body>
   <div id="myApp">
       <h1>注册页面</h1>
       <label>用户名:</label>
       <input type="text" v-model="user.userName">
       <br>
       <label>密码:</label>
       <input type="password" v-model="user.password">
       <br>
       <button type="button" @click="zhuce">注册</button>
       <a href="/login.html">回到登录页面</a>
   </div>


</body>
<script>
       //创建vue对象
      new Vue({
           el:"#myApp",//挂载HTML元素，挂载的一个容器
           data:{ //数据
               user:{
                   userName:"",//用户名
                   password:""//密码
               }
           },
           methods:{//函数，方法，多个函数
                zhuce(){//注册
                    //打印数据到浏览器的控制台
                    console.log(this.user);
                    //把数据发送到服务端
                    $.ajax({
                         url:"/user/zhuce",//服务器地址，控制器的地址函数
                         data:this.user,//数据，发送的数据
                         success:function (rs) {//成功访问到服务端后执行的函数，rs 响应数据，服务端返回的数据
                                console.log(rs);
                                if (rs.code==200){
                                    alert(rs.msg);
                                    //跳转到登录页面
                                    window.location.href="/login.html";
                                }else{
                                    alert(rs.msg);
                                }
                         }
                    })

                }
           }
      })
</script>
</html>
